<template>
  <div>
    <video
      id="videoPlayer"
      style="height:100%;width:100%;"
      controls
      autoplay>
    </video>
  </div>
</template>

<script>
/* eslint-disable */
// 工具
import flvjs from "flv.js";

export default {
  name: "flvjs", // 不能使用 video 命名
  props: {
    src: {
      type: String,
      default: 'http://10.202.5.9:8090/live?app=live&stream=xiwan_1'
    }
  },
  watch:{
    src(val){
      console.log(val)
    }
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  mounted() {
    this.updatePlay();
  },
  watch: {
    src (val, oldVal) {
      this.updatePlay();
    }
  },
  methods: {
    updatePlay() {
      let videoSrc = this.src;
      console.log("videoSrc:", videoSrc);
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoPlayer");
        if (this.flvPlayer != null) {
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          // url: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TLaf2cc9d469939803949187b46da16c45.flv'
          url: videoSrc
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
      }
    }
  }
};
</script>

<style></style>
